<template>
	<view class="shopkeeper">
		<u-navbar title="店主认证" :title-size="35" custom-back :title-bold="true" :immersive="true"
			:background="background" :border-bottom="false"></u-navbar>
		<view class="title">
			店主认证
		</view>
		<view class="subtitle">
			距离成为店主就差一步了，快来加入我们把~
		</view>
		<view class="form">
			<view class="form-item">
				<view class="item-lf">
					姓名
				</view>
				<view class="item-rg">
					<input type="text" value="" style="color: black;" placeholder="请输入姓名" v-model="form.name" />
				</view>
			</view>
			<view class="form-item">
				<view class="item-lf">
					联系电话
				</view>
				<view class="item-rg">
					<input type="text" value="" style="color: black;" placeholder="请输入联系电话" v-model="form.tel" />
				</view>
			</view>
			<view class="form-item">
				<view class="item-lf">
					开店预算
				</view>
				<view class="item-rg">
					<input type="number"  value="" style="color: black;" placeholder="请输入开店预算" v-model="form.money" />
				</view>
			</view>
			<view class="form-item">
				<view class="item-lf">
					开店城市
				</view>
				<view class="item-rg">
					<pickerAddress class="custom_input" @change="change">
						<input type="text" style="color: black;" value="" disabled placeholder="请输入开店城市"
							v-model="form.city.toString()" />
					</pickerAddress>
				</view>
			</view>
			
			<view class="form-item">
				<view class="item-lf">
					店铺名称
				</view>
				<view class="item-rg">
					<input type="text" value="" style="color: black;" placeholder="请输入店铺名称" v-model="form.shopName" />
				</view>
			</view>
			<view class="form-item">
				<view class="item-lf">
					详细地址
				</view>
				<view class="item-rg">
					<input type="text" value="" style="color: black;" placeholder="请输入详细地址" v-model="form.address" />
				</view>
			</view>
			<view class="form-item" style="border-bottom:1px solid #eeeeee;">
				<view class="item-lf">
					咨询备注
				</view>
				<view class="item-rg">
					<input type="text" value="" style="color: black;" placeholder="请输入咨询备注" v-model="form.remark" />
				</view>
			</view>
			<!-- <view class="form-item" style="border-bottom:1px solid #ffffff; margin-top: 20px;">
				<view class="item-lf">
					上传照片
				</view>
				<view class="item-rg" style="height: 100px; margin-top: 30px;">
					<u-upload ref="uUpload" max-count="1" :action="action" :auto-upload="true"
						:before-upload="qweupload" :on-choose-complete="qwe" name="image" style="margin-left: -60px;">
					</u-upload>
				</view>
			</view> -->

		</view>
		<view class="submit" @click="authentication">
			<view class="submit-p">
				提交认证
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../api/http.js'
	import pickerAddress from '@/uni_modules/hu-pickerAddress/components/hu-pickerAddress/hu-pickerAddress.vue'
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				path: '',
				action: 'https://gongxiangtaiqiu.axa2.com/upload',
				fileList: [{
					url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
				}],
				form: {
					name: '',
					tel: '',
					money: '',
					city: '',
					address: '',
					remark: '',
					shopName: '',
					allcity: [],
				},
				txt: '请选择所在地区',
				lat: '',
				lng: '',
			};
		},
		onLoad() {

		},
		methods: {
			qweupload(index, lists) {
				// console.log(index, lists);
				setTimeout(() => {
					this.path = lists[0].response.data
					console.log(this.path);
				}, 2000)

			},
			change(data) {
				this.form.city = data.data.join("")
				this.form.allcity = data.data
				console.log(data.data)
				console.log(this.form.city)
			},
			authentication() {
				if (!this.form.name) { //判断如果手机号（this.tele）为空，提示用户输入手机号
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/ //正则表达式定义手机号正确格式
				if (!this.form.tel) { //判断如果手机号（this.tele）为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}

				if (!reg.test(this.form.tel)) { //判断手机号格式时候正确
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}

				if (!this.form.money) {
					uni.showToast({
						title: '请输入开店预算',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.city) {
					uni.showToast({
						title: '请输入开店城市',
						icon: 'none'
					})
					return
				}
				if (!this.form.remark) {
					uni.showToast({
						title: '请输入咨询备注',
						icon: 'none'
					})
					return
				}
				if (!this.form.address) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}
				if (!this.form.shopName) {
					uni.showToast({
						title: '请输入店铺名称',
						icon: 'none'
					})
					return
				}
				// if (!this.path) {
				// 	uni.showToast({
				// 		title: '请添加上传图片',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				//根据地区获取经纬度
				this.$Api.getJW({
					province: this.form.allcity[0],
					city: this.form.allcity[1],
					region: this.form.allcity[2],
					address: this.form.address,

				}).then(res => {

					console.log(res.data.data.location,'好几个服防火规范vu')
					this.lat = res.data.data.location.lat
					this.lng = res.data.data.location.lng
					if(this.lat==''||this.lng==''){
						uni.showToast({
							title: '请检查地区是否选择',
							icon:'none'
						})
						return
					}
					console.log('lat', this.lat, 'lng', this.lng)
					//认证接口
					this.$Api.applyShop({
						userId: uni.getStorageSync('userid'),
						name: this.form.name,
						phone: this.form.tel,
						money: this.form.money,
						province: this.form.allcity[0],
						city: this.form.allcity[1],
						area: this.form.allcity[2],
						address: this.form.address,
						lon: this.lng,
						lat: this.lat,
						remark: this.form.remark,
						shopName: this.form.shopName,
						img: this.path,

					}).then(res => {
						if (res.data.code == 0) {
							uni.showToast({  
								title: '申请成功',
								icon: 'success'
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1000)
							
						}

					}, err => {})
				}, err => {})
			}



		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/bg.png');
	}

	.title {
		// width: 189rpx;
		height: 45rpx;
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #222222;
		margin-top: 220rpx;
		margin-left: 46rpx;
	}

	.subtitle {
		width: 566rpx;
		height: 27rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		margin-top: 40rpx;
		margin-left: 46rpx;
	}

	.form {
		width: 690rpx;
		// height: 990rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: auto;
		margin-top: 47rpx;
		padding-top: 20rpx;

		.form-item {
			width: 600rpx;
			height: 100rpx;
			margin: auto;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1px solid #EEEEEE;

			.item-lf {
				width: 150rpx;
				height: 70rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
				display: flex;
				align-items: center;
			}

			.item-rg {

				width: 500rpx;
				height: 70rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #C2C2C2;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

	}

	.submit {
		width: 690rpx;
		height: 88rpx;
		background: #222222;
		border-radius: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto;
		margin-top: 47rpx;

		.submit-p {
			// width: 119rpx;
			// height: 29rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #02FF83;
		}
	}
</style>
